<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue"
import { useRoute } from "vue-router"
import { requestUserDynamic } from "../../utils/axiosURL"

const route = useRoute()
const userID = ref<any>(route.query.id)
const nickNames = ref<any>(route.query.nickNames)
// 动态数据
let dynamicData = reactive<any>([])
// noAuthority 无权限
let noAuthority = ref<boolean>(false)

// 用户动态数据
const requestUserDynamicFn = () => {
  requestUserDynamic(userID.value).then((data: any) => {
    if (!data.events.length) return noAuthority.value = true
    dynamicData.values = data.events
  }).catch(err => {
    console.log(err)
  })
}

onMounted(() => {
  requestUserDynamicFn()
})

</script>

<template>
  <div class="dynamicWrap">
    <p class="dynamicTitle">{{ nickNames }}的动态</p>
    <div class="noSongList" v-if="noAuthority">用户暂无动态</div>
    <ul class="dynamicList" v-else-if="dynamicData.values.length">
      <li class="dynamicItem" v-for="(item, index) in dynamicData.values">
        <div class="leftImg">
          <img :src="`${item.user?.avatarUrl}`">
        </div>
        <div class="rightMore">
          <p class="userName">
            <span class="userNames">{{ item.user.nickname }}</span>
            <span>--分享曲单</span>
          </p>
          <p class="time">{{ item.eventTime }}</p>
          <p class="dynamicCtn">{{ JSON.parse(item.json).msg }}</p>
          <div class="songWrap">
            <div class="leftSongWrap">
              <img :src="`${item.user.backgroundUrl}`" alt="">
            </div>
            <div class="rightInfo">
              <p class="songTitle">后来的我们</p>
              <p class="author">五月天</p>
            </div>
          </div>
          <div v-if="item.pics[0]?.pcRectangleUrl" class="imgCtn">
            <img :src="`${item.pics[0]?.pcRectangleUrl}`" alt="">
          </div>
        </div>
      </li>
    </ul>
    <div class="forbid" v-for="item in 10" v-else>
      <commentItemSkeleton />
    </div>
  </div>
</template>


<style lang="scss" scoped>
.dynamicWrap {
  width: 100%;
  height: 93%;

  .dynamicTitle {
    font-size: $font-size-lg2;
    font-family: $textFont;
    margin-left: 30px;
    line-height: 60px;
  }

  .noSongList {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    font-family: $activeTextFont;
    font-size: $font-size-lg2;
  }

  .dynamicList {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px 20px 150px 30px;
    box-sizing: border-box;

    .dynamicItem {
      display: flex;
      width: 100%;
      padding: 20px 0;

      .leftImg {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        background-color: skyblue;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .rightMore {
        flex: 1;
        margin-left: 10px;

        .userName {
          font-size: $font-size-xs;
          font-family: $textFont;
          color: $font_main_color;
          margin-bottom: 10px;

          .userNames {
            font-size: $font-size-sm;
            color: rgb(80, 125, 175);
          }
        }

        .time {
          color: $font_second_color;
          font-size: $font-size-xs;
          font-family: $textFont;
          margin-bottom: 10px;
        }

        .dynamicCtn {
          font-family: $textFont;
          font-size: $font-size-sm;
          margin-bottom: 10px;
        }

        .songWrap {
          display: flex;
          align-items: center;
          width: 100%;
          height: 40px;
          padding: 7px 0 8px 0;
          margin-bottom: 10px;
          background-color: rgb(243, 243, 244);
          border-radius: 5px;

          .leftSongWrap {
            flex-basis: 40px;
            width: 40px;
            height: 40px;
            border-radius: 4px;
            margin-left: 8px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .rightInfo {
            flex: 1;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            color: $font_second_color;
            margin-left: 10px;
            height: 100%;
            box-sizing: border-box;

            .songTitle {
              font-size: 12px;
              color: $font_main_color;
            }

            .author {
              font-size: 12px;
              color: $font_second_color;
            }
          }

          &:hover {
            background-color: rgb(239, 239, 240);
          }
        }

        .imgCtn {
          max-width: 500px;
          max-height: 500px;
          border-radius: 6px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      &~.dynamicItem {
        border-top: 1px solid $lineColor;
        margin-top: 20px;
      }
    }
  }

  .forbid {
    display: flex;
    justify-content: center;
    width: 100%;

    p {
      font-size: $font-size-lg;
      font-family: $textFont;
    }
  }
}
</style>
